<template>
  <div class="terminal-settings">

    <div>
      <el-button
        type="primary"
        size="small"
        class="mb-3 set-btn"
        :disabled="checkedComponents.length < 1"
        :loading="confirmLoading"
        @click="submit"
      >{{ $t('common.push') }}
      </el-button>
      <el-button size="small" class="mb-3 set-btn" @click="cancel">{{ $t('page.cancel') }}</el-button>
      <el-form @submit.prevent.native>
        <el-card>
          <template #header>
          <div class="flex justify-between items-center">
            <h2>{{ $t('common.option') }}</h2>
            <el-button
              class="p-1 mr-4"
              size="small"
              type="primary"
              @click="() => (dialogVisible = true)"
            >
              <i class="el-icon-plus" />
            </el-button>
          </div>
        </template>
          <div v-if="checkedComponents.includes('Screen Brightness')" class="settings-row">
            <span class="slider-label text-secondary">{{ $t('modules.tms.terminal.screen_brightness') }}</span>
            <svg-icon icon-class="brightness" class="text-secondary text-lg mr-3" />
            <el-slider v-model="formData.screenBrightness" class="w-9/12" :max="100" />
            <svg-icon icon-class="brightness" class="text-secondary text-3xl ml-2" />
          </div>

          <div v-if="checkedComponents.includes('Media Volume')" class="settings-row">
            <span class="slider-label">{{ $t('modules.tms.terminal.media_volume') }}</span>
            <svg-icon icon-class="volume-mute" class="text-secondary text-lg mr-3" />
            <el-slider v-model="formData.mediaVolume" class="w-9/12" :max="100" />
            <svg-icon icon-class="volume_max" class="text-secondary text-3xl ml-3" />
          </div>

          <div v-if="checkedComponents.includes('Ring Volume')" class="settings-row">
            <span class="slider-label">{{ $t('modules.tms.terminal.ring_volume') }}</span>
            <svg-icon icon-class="volume-mute" class="text-secondary text-lg mr-3" />
            <el-slider v-model="formData.ringVolume" class="w-9/12" :max="100" />
            <svg-icon icon-class="volume_max" class="text-secondary text-3xl ml-3" />
          </div>

          <div v-if="checkedComponents.includes('Time Zone')" class="settings-row">
            <span class="text-secondary w-36">{{ $t('common.time_zone') }}</span>
            <el-select v-model="formData.timeZone" size="small">
              <el-option v-for="i in timezones" :key="i" :label="i" :value="i" />
            </el-select>
          </div>
          <div v-if="checkedComponents.includes('Language')" class="settings-row">
            <span class="text-secondary w-36">{{ $t('common.language') }}</span>
            <el-select v-model="formData.language" size="small" value-key="value">
              <el-option v-for="i in languages" :key="i.value" :value="i.value" :label="i.lable" />
            </el-select>
          </div>
          <div v-if="checkedComponents.includes('Sleep Time')" class="settings-row">
            <span class="text-secondary w-36">{{ $t('modules.tms.terminal.sleep_time') }}</span>
            <el-select v-model="formData.sleepTime" size="small">
              <el-option v-for="i in androidSleepTimes" :key="i.value" :value="i.value" :label="i.lable" />
            </el-select>
            <!-- <el-input
              v-model="formData.sleepTime"
              placeholder="second(s)"
              type="number"
              size="small"
              style="padding-left: 20px"
            /> -->
          </div>
          <div v-if="checkedComponents.includes('Status Bar')" class="settings-row">
            <span class="text-secondary w-40">{{ $t('modules.tms.terminal.status_bar') }}</span>
            <el-switch v-model="formData.statusBarSwitch" :active-value="0" :inactive-value="1" />
          </div>
          <div v-if="checkedComponents.includes('Cellular network')" class="settings-row">
            <span class="text-secondary w-40">{{ $t('modules.tms.terminal.cellular_network') }}</span>
            <el-switch v-model="formData.cellularNetworksSwitch" :active-value="0" :inactive-value="1" />
          </div>
          <div v-if="checkedComponents.includes('Wifi')" class="settings-row">
            <template>
              <span class="text-secondary w-40">Wifi</span>
              <el-switch v-model="formData.wifiSwitch" :active-value="0" :inactive-value="1" @change="clickWifi" />
              <div v-show="wifiVisible" style="margin: 5px 5px">
                <span class="text-secondary w-4">{{ $t('modules.tms.terminal.wifissid') }}</span>
                <el-input v-model="formData.wifiSsid" size="small" maxlength="200" show-word-limit />
              </div>
              <div v-show="wifiVisible">
                <span class="text-secondary w-36">{{ $t('common.password') }}</span>
                <el-input v-model="formData.wifiPassword" size="small" maxlength="50" show-word-limit />
              </div>
            </template>
          </div>
          <div v-if="checkedComponents.includes('APN')" class="settings-row">
            <span class="text-secondary w-40">APN</span>
            <span>APN {{ $t('common.name') }}:</span>
            <el-input v-model="formData.apnName" size="small" maxlength="100" show-word-limit />
          </div>
          <div v-if="checkedComponents.includes('APN')" class="settings-row">
            <span class="text-secondary w-40" />
            <span>APN:</span>
            <el-input v-model="formData.apnApn" style="margin-left: 47px" size="small" maxlength="100" show-word-limit />
          </div>
          <div v-if="checkedComponents.includes('APN')" class="settings-row">
            <span class="text-secondary w-40" />
            <span>MCC:</span>
            <el-input v-model="formData.apnMcc" style="margin-left: 42px" size="small" maxlength="100" show-word-limit />
          </div>
          <div v-if="checkedComponents.includes('APN')" class="settings-row">
            <span class="text-secondary w-40" />
            <span>{{ $t('common.type') }}:</span>
            <el-input v-model="formData.apnType" style="margin-left: 47px" size="small" maxlength="100" show-word-limit />
          </div>
          <div v-if="checkedComponents.includes('APN')" class="settings-row">
            <span class="text-secondary w-40" />
            <span>MNC:</span>
            <el-input v-model="formData.apnMnc" style="margin-left: 41px" size="small" maxlength="100" show-word-limit />
          </div>
          <div v-if="checkedComponents.includes('GPS')" class="settings-row">
            <span class="text-secondary w-40">GPS</span>
            <el-switch v-model="formData.gpsSwitch" :active-value="0" :inactive-value="1" />
          </div>

          <div v-if="checkedComponents.includes('BlueTooth')" class="settings-row">
            <span class="text-secondary w-40">{{ $t('modules.tms.terminal.bluetooth') }}</span>
            <el-switch v-model="formData.bluetoothSwitch" :active-value="0" :inactive-value="1" />
          </div>
          <div v-if="checkedComponents.includes('MagCard')" class="settings-row">
            <span class="text-secondary w-40">Mag{{ $t('common.card') }}</span>
            <el-switch v-model="formData.magCardSwitch" :active-value="0" :inactive-value="1" />
          </div>

          <div v-if="checkedComponents.includes('RFCard')" class="settings-row">
            <span class="text-secondary w-40">RF{{ $t('common.card') }}</span>
            <el-switch v-model="formData.rfCardSwitch" :active-value="0" :inactive-value="1" />
          </div>

          <div v-if="checkedComponents.includes('ICCard')" class="settings-row">
            <span class="text-secondary w-40">IC{{ $t('common.card') }}</span>
            <el-switch v-model="formData.icCardSwitch" :active-value="0" :inactive-value="1" />
          </div>

          <div v-if="checkedComponents.includes('Printer')" class="settings-row">
            <span class="text-secondary w-40">{{ $t('modules.tms.terminal.printer') }}</span>
            <el-switch v-model="formData.printSwitch" :active-value="0" :inactive-value="1" />
          </div>
        </el-card>
      </el-form>
    </div>
    <settings-dialog
      v-model="dialogVisible"
      :components="components"
      @change="(value) => (checkedComponents = value)"
    />
  </div>
</template>

<script>
import { setParams } from '@/api/batch'
import SettingsDialog from './SettingsDialog.vue'

export default {
  components: {
    SettingsDialog
  },
  data() {
    return {
      components: [
        { label: 'Screen Brightness', key: 'screenBrightness', icon: 'brightness' },
        { label: 'Media Volume', key: 'mediaVolume', icon: 'volume_max' },
        { label: 'Ring Volume', key: 'ringVolume', icon: 'volume_max' },
        { label: 'Time Zone', key: 'timeZone', icon: 'time' },
        { label: 'Language', key: 'language', icon: 'language' },
        { label: 'Sleep Time', key: 'sleepTime', icon: 'time' },
        { label: 'Status Bar', key: 'statusBarSwitch', icon: 'statusbar' },
        { label: 'Wifi', key: 'wifiSwitch', icon: 'wifi' },
        /* { label: 'Wifissid', key: 'wifiSsid', icon: 'wifi' },
        { label: 'Password', key: 'wifiPassword', icon: 'password' }, */
        { label: 'Cellular network', key: 'cellularNetworksSwitch', icon: 'network' },
        { label: 'APN', key: 'apnApn', icon: 'apn' },
        { label: 'GPS', key: 'gpsSwitch', icon: 'gps' },
        { label: 'BlueTooth', key: 'bluetoothSwitch', icon: 'bluetooth' },
        { label: 'MagCard', key: 'magCardSwitch', icon: 'card' },
        { label: 'RFCard', key: 'rfCardSwitch', icon: 'card' },
        { label: 'ICCard', key: 'icCardSwitch', icon: 'card' },
        { label: 'Printer', key: 'printSwitch', icon: 'print' }
      ],
      checkedComponents: [],
      confirmLoading: false,
      dialogVisible: false,
      formData: {
        wifiPassword: '',
        screenBrightness: 1,
        mediaVolume: 1,
        ringVolume: 1,
        language: '',
        timeZone: '+8',
        sleepTime: '60',
        time: '',
        apnSwitch: 1,
        apnApn: '',
        apnMnc: '',
        apnMcc: '',
        apnType: '',
        apnName: '',
        wifiSwitch: 1,
        wifiSsid: '',
        gpsSwitch: 1,
        bluetoothSwitch: 1,
        magCardSwitch: 1,
        rfCardSwitch: 1,
        icCardSwitch: 1,
        printSwitch: 1,
        cellularNetworksSwitch: 1,
        statusBarSwitch: 1
      },
      wifiVisible: true,
      batchId: '',
      androidSleepTimes: [
        { value: '0', lable: 'Never' },
        { value: '15', lable: '15s' },
        { value: '30', lable: '30s' },
        { value: '60', lable: '1min' },
        { value: '120', lable: '2min' },
        { value: '300', lable: '5min' },
        { value: '600', lable: '10min' },
        { value: '3000', lable: '30min' }
      ],
      timezones: [
        '-12',
        '-11',
        '-10',
        '-9:30',
        '-9',
        '-8',
        '-7',
        '-6',
        '-5',
        '-4',
        '-3',
        '-2:30',
        '-2',
        '-1',
        '+0',
        '+1',
        '+2',
        '+3',
        '+4',
        '+4:30',
        '+5',
        '+5:30',
        '+5:45',
        '+6',
        '+6:30',
        '+7',
        '+8',
        '+8:45',
        '+9',
        '+9:30',
        '+10',
        '+10:30',
        '+11',
        '+12',
        '+12:45',
        '+13',
        '+14'
      ],
      languages: [
        { value: 'en_US', lable: 'English' },
        { value: 'zh_CN', lable: 'Simplified Chinese' },
        { value: 'zh_HK', lable: 'Traditional Chinese' },
        { value: 'pt_BR', lable: 'Portuguese' },
        { value: 'ru_RU', lable: 'Russian' },
        { value: 'tr_TR', lable: 'Turkish' },
        { value: 'hi_IN', lable: 'Hindi' },
        { value: 'uk_UA', lable: 'Ukrainian' },
        { value: 'vi_VN', lable: 'Vietnamese' },
        { value: 'tl_PH', lable: 'Tagalog' },
        { value: 'ar_EG', lable: 'Arabic' },
        { value: 'th_TH', lable: 'Thai' }
      ]
    }
  },
  watch: {

  },
  mounted() {
    this.batchId = this.$route.params.batchId
  },
  methods: {
    submit() {
      this.confirmLoading = true
      const submitData = {}
      this.checkedComponents.forEach((item) => {
        console.log('item:' + item)
        const found = this.components.find(
          (component) => component.label === item
        )
        if (found) {
          submitData[found.key] = this.formData[found.key]
        }
        if (found && item === 'APN') {
          submitData.apnName = this.formData.apnName
          submitData.apnMcc = this.formData.apnMcc
          submitData.apnMnc = this.formData.apnMnc
          submitData.apnType = this.formData.apnType
        }

        if (found && item === 'Wifi') {
          submitData.wifiSsid = this.formData.wifiSsid
          submitData.wifiPassword = this.formData.wifiPassword
        }
      })
      setParams(this.batchId, submitData).then((res) => {
        this.$message({
          message: this.$t('common.message.command_sent_successfully'),
          type: 'success',
          onClose: () => {
            this.$router.back(-1)
          }
        })
      }).catch(this.$confirmError)
      this.confirmLoading = false
    },
    cancel() {
      this.$router.back(-1)
    },
    clickWifi() {
      if (this.formData.wifiSwitch === 0) {
        this.wifiVisible = true
      } else {
        this.wifiVisible = false
      }
    }
  }
}
</script>

<style lang="scss">
.terminal-settings {
  .el-input {
    padding-left: 20px;
  }

  .el-input__prefix {
    left: 25px;
  }

  .el-slider__runway {
    margin: 10px 0;
  }

  .el-input {
    width: 200px;
  }

  .set-btn.el-button {
    padding: 9px 30px;
  }
}
</style>

<style scoped lang="scss">
.settings-row {
  @apply flex items-center mb-4;
  & > .slider-label {
    @apply inline-block w-40 text-secondary;
  }
}
</style>
